<template>
  <view class="wrap">
		 <view class="header-img-box">
			 <image class="img" src="/static/my/vip_back.png"></image>
		 </view>
    <top-tab tabTitle="会员收益" @backClick="backClick">
		 </top-tab>
		 <view class="vip-title">
			 <view class="img-logo-title">
				 <image class="vip-logo" src="/static/my/vip_logo.png" mode="aspectFill"></image>
				 <view class="title">我的会员权益</view>
				 <image class="vip-logo" src="/static/my/vip_logo.png" mode="aspectFill"></image>
			 </view>
			 <view class="subhead">开启会员认证畅想一下权益</view>
		 </view>
		 <view class="main">
			<view class="inn-title-back">
				<view v-for="(item,index) in imgBackList" :key="index">
					<view class="img-back">
						<image class="img" :src="item.url"></image>
					</view>
					<view class="img-title">{{item.text}}</view>
				</view>			 
			</view>
			<view class="add-vip-box">
				<view class="logo-add-vip-title">
					<view class="logo-back"></view>
					<view class="title">开通会员</view>
				</view>
				<view class="purchase" @click="buyRecord">购买记录</view>
			</view>
			<!-- 轮播 -->
			<view class="add-vip-btn-box">
				<view class="item-money" v-for="(item,index) in addVip" :key="index">
					<view class="day-vip">{{item.title}}</view>
					<view class="money">{{item.amount}}<text class="unit">元</text></view>
					<view class="top-price">￥{{item.originalPrice}}.00</view>
					<view class="once-open" @click="addPay(item.amount,item.id)">立即开通</view>
					<view class="postion-left"></view>
					<view class="postion-right"></view>
				</view>
			</view>
			<!-- 支付弹窗 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="16rpx">
				<view class="popup-main">
					<view class="title">请选择支付方式：</view>
					<view class="list-box" v-for="(item,index) in payList.aisles" :key="index" @click="radioChange(index,item.id)">
						<view class="balance-wrap">
							<image :src="item.iconUrl" class="img"></image>
							<view class="item-name">{{item.name}}</view>
						</view>
						<radio-group>
							<label class="uni-list-cell uni-list-cell-pd">
								<radio :checked="index === current"/>
							</label>
						</radio-group>
					</view>
				</view>
			</uni-popup>
		 </view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
  export default {
		components: { topTab },
    data() {
      return {
				payOrder: { // 支付生成订单参数
					aisleId: '', // 支付方式id
					channelId: '', // 支付渠道id
					goodsId: '' // VIP等级id
				},
				current: 0,
				payMoney:'', // 需要支付的金额
				payList: [], // 支付数据
				addVip: [],
				imgBackList: [
					{ id: 1, text: '积分获取', url: '/static/my/integral.png'},
					{ id: 1, text: '免费保障', url: '/static/my/safeguard.png'},
					{ id: 1, text: '会员礼卷', url: '/static/my/gift.png'},
					{ id: 1, text: '生活特权', url: '/static/my/safeguard.png'},
				],
				statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
			}
    },
  onLoad() {
  	this.integralGoods() // 可兑换的积分商品
  },
  methods: {
		// 可兑换的积分商品
		async integralGoods() {
			const res = await $GET("/boke-user/goodsInfo/getList")
			this.addVip = res.data
		},
		// 购买记录
		buyRecord() {
			uni.navigateTo({
				url: '/pages/my/buy_vip/buy_record'
			})
		},
		// 单选框事件
		async radioChange(e,id) {
			this.payOrder.aisleId = id // 支付方式id赋值
			this.payOrder.channelId = this.payList.id // 支付渠道id赋值
			this.current = e
			const res = await $POST("/boke-pay/recharge/save",this.payOrder)
			if (res.code === "0000000") {
				uni.navigateTo({
					url: '/pages/my/buy_vip/pay_succeed?codeUrl='+res.data.codeUrl+'&money='+this.payMoney+'&amount='+res.data.orderNumber
				})
			}
		},
		// 打开弹窗
		async addPay(money,id) {
			this.payList = []
			this.payOrder.goodsId = id // 商品id赋值
			this.payMoney = money // 赋值支付金额
			const res = await $GET("/boke-pay/channel/queryList")
			this.payList = res.data[0]
			this.$refs.popup.open('')
			 
		},
		// 返回上一页
		backClick() {
			uni.switchTab({
			    url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.header-img-box{
		width: 100%;
		height: 518rpx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	/deep/ .top-tabbar-wrap{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.15);
	}
	.vip-title{
		.img-logo-title{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 34rpx;
			.vip-logo{
				width: 42rpx;
				height: 24rpx;
			}
			.title{
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #8E2FBA;
				margin: 0 20rpx;
			}
		}
		.subhead{
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 20rpx 0 40rpx 0;
			text-align: center;
		}
	}
	.main{
		padding: 0 27rpx;
		.inn-title-back{
			width: 100%;
			height: 174rpx;
			background: #FFFFFF;
			box-shadow: 0px 3rpx 13rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 47rpx;
			.img-back{
				width: 92rpx;
				height: 92rpx;
				background: #F8E4FF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				.img{
					display: block;
					width: 53rpx;
					height: 59rpx;
				}
			}
			.img-title{
				font-size: 22rpx;
				margin-top: 18rpx;
			}
		}
		.add-vip-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 52rpx 0 44rpx 0;
			.logo-add-vip-title{
				display: flex;
				align-items: center;
				.logo-back{
					width: 4rpx;
					height: 40rpx;
					background: #B73DF0;
					border-radius: 2rpx;
				}
				.title{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 20rpx;
				}
			}
			.purchase{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
				padding-right: 33rpx;
			}
		}
		.add-vip-btn-box::-webkit-scrollbar {
				display: none; 
			}
		.add-vip-btn-box{
			// width: 100%;
			padding-bottom: 163rpx;
			display: flex;
			align-items: center;
			overflow-x: auto; 
			overflow-y: hidden;
			display: -webkit-box; 
			-webkit-overflow-scrolling: touch;
			.item-money:first-child{
				.once-open{
					background: linear-gradient(90deg, #B83DF1, #852CAE);
					-webkit-text-fill-color: #FFFFFF;
				}
			}
			.item-money{
				width: 191rpx;
				background: #FEE5C9;
				border-radius: 7rpx 7rpx 0 0;
				text-align: center;
				position: relative;
				margin-right: 30rpx;
					.day-vip{
						width: 112rpx;
						height: 30rpx;
						background: #F29B76;
						border-radius: 0px 0px 7rpx 7rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						text-align: center;
						margin: auto;
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				.money{
					font-size: 83rpx;
					font-family: Arial;
					font-weight: 600;
					color: rgba(255, 255, 255, 0.78);
					opacity: 0.87;
					text-shadow: 0px 1px 1px rgba(74, 74, 74, 0.52);
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					padding-top: 33rpx;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					.unit{
						font-size: 24rpx;
					}
				}
				.top-price{
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 0.78);
					text-shadow: 0px 1px 1px rgba(74, 74, 74, 0.52);
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					text-decoration:line-through  #333333;
					padding-bottom: 45rpx !important;
				}
				
				.once-open{
					padding: 27rpx 0;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					border-top: 1rpx solid #ECAF8D;
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.postion-left{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					left: -7px;
					top:68%;
				}
				.postion-right{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					right: -7px;
					top:68%;
				}
			}
		}
		.popup-main{
			width: 100%;
			padding-bottom: 50px;
			.title{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 178rpx 30rpx 42rpx 30rpx;
			}
			.list-box{
				height: 110rpx;
				border-bottom: 1rpx solid #EEEEEE;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.balance-wrap{
					display: flex;
					align-items: center;
					.img{
						width: 55rpx;
						height: 55rpx;
					}
					.item-name{
						font-size: 28rpx;
						color: #333333;
						margin-left: 30rpx;
					}
				}
			}
			.footer{
				margin-top:158rpx;
				margin-bottom: env(safe-area-inset-bottom);
				padding: 0 30rpx;
				.btn-pay{
					width: 100%;
					height: 98rpx;
					line-height: 98rpx;
					text-align: center;
					background: linear-gradient(90deg, #B83DF1, #852CAE);
					border-radius: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>
